<template>
  <div class="vepD4-region-year">

    <div class="vepD4-region-year-main">
      <!-- 显示当前选择的地区和年份 -->
      <!-- 假设 selectedArea 和 selectedYear 是在 data 中定义的变量 -->
      <div class="vepD4-region-year-title">
      <span class="vepD4-select-title-font" >
        {{ vepName }} VEP项目核算</span>
        <!--      <span class="select-title-font">-->

        <!--        {{projectName || ''}}特定地域单元生态产品价值核算</span>-->
      </div>
      <div class="vepD4-select">

        <div class="vepD4-input-name">
          <label class="vepD4-label">项目名称:</label>
          <input type="text" v-model="vepName" class="value-input ml-2  border border-gray-300   rounded-lg focus:  p-1" style="color: #2e2b2b;"/>
          <!--          <input type="text"  v-model="vepName" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Doe" required />-->

        </div>

        <div class="vepD4-select-region">

        </div>
        <div class="vepD4-select-region">
          <label class="vepD4-label">选择乡镇：</label>
          <!-- 为 el-cascader 添加 change 事件处理器 -->
<!--          <el-cascader-->
<!--              :options="optionsArea"-->
<!--              v-model="vepRegion"-->
<!--          />-->
          <el-cascader
              :options="optionsArea"
              :props="cascaderProps"
              v-model="vepSelectRegion"
              @change="handleChange"
              placeholder="请选择地址"
          />
          <!--          <el-cascader-->
          <!--              :options="optionsArea"-->
          <!--              v-model="vepRegion"-->
          <!--              @change="emitter.emit('get-vep-region',selectedArea[0])"-->
          <!--          />-->
        </div>
      </div>
    </div>
    <!--    <div class="vep-result">-->
    <!--      &lt;!&ndash;      <span style="text-align: center" v-if="vep !== 0">{{ projectName }}VEP:</span>&ndash;&gt;-->
    <!--      <dv-digital-flop :config="config" style="width:auto;height:auto;"/>-->
    <!--    </div>-->

  </div>
</template>

<script lang="ts" setup>
import {ref, watch, defineEmits, reactive} from 'vue';
import {ElCascader, ElSelect, ElOption} from 'element-plus';
import {getRegulationServiceByPath} from "api/services/regulationService";
import type { CascaderValue } from 'element-plus';
import {useGepDataStore, useGepRegulationServiceStore} from "@/stores/gep";
import {
  useVepRegulationServiceStore,
  useVepDataStore,
} from "@/stores/vep";
import {storeToRefs} from "pinia";
// import {getInputVEP, getVEPData} from "api/vepApi";
import addressData01 from "@/assets/json/addressData/addressData-yanshan01.json";
const vepDataStore = useVepDataStore();

const {vepName,vepYear,isSelected, vepSelectRegion,vepCity,vepDistrict,vepTown, vepTestValue, vepValue,vepNameAll} = storeToRefs(vepDataStore);
const vepRegulationServiceStore = useVepRegulationServiceStore();
let {regionRegulationService} = storeToRefs(vepRegulationServiceStore);

// 级联选择器的属性设置
const cascaderProps = {
  value: 'value',
  label: 'label',
  children: 'children'
};
const options01 = ref(addressData01);
// 处理选择变化
const handleChange = (value?: CascaderValue) => {
  // 使用类型守卫确保 value 是数组
  if (!Array.isArray(value) || value.length === 0) return;

  const selectedRegion = value[0];

  // 固定设置市级为“上饶市”，区级为“铅山县”
  vepCity.value = '上饶市';
  vepDistrict.value = '铅山县';

  if (selectedRegion === '铅山县') {
    vepTown.value = '总计';
  } else {
    vepTown.value = String(selectedRegion); // 确保是字符串
  }
};

function sumGepValues(data: any): number {
  console.log('sumGepValues',data)
  const keys = [
    'outAirPurification',
    'outCalcBiodiversityProtection',
    'outCalcFloodRegulation',
    'outCalcNoiseReduced',
    'outCarbonSequestration',
    'outClimateRegulation',
    'outSoilConservation',
    'outWaterPurification',
    'outWaterSourceConservation'
  ];

  return keys.reduce((total, key) => {
    const value = data[key];
    // console.log('value',value)
    // console.log('total',total)
    // console.log('total',Number(total))

    if (value === null || value === undefined) {
      return total;
    }

    // 如果是对象，则取 parsedValue
    if (typeof value === 'object' && 'parsedValue' in value) {
      return total + Number(value.parsedValue || 0);
    }

    // 如果是数字或可以转换为数字的字符串
    return total + Number(value || 0);
  }, 0);
}


// 监听地区选择框，提供测试数据
watch([vepCity, vepTown, vepDistrict, vepYear], async (newValues, oldValue) => {
  // 解构出新的值
  const [newCity, newTown, newDistrict, newYear] = newValues;
  if(newCity === '市'){
    console.log('newCity',newCity)
  }else{
    const response = await getRegulationServiceByPath(Number(newYear),newCity,newDistrict,newTown)
    console.log(newTown,'调节服务数据:', response);

    // 求和
    vepRegulationServiceStore.regionRegulationService = sumGepValues(response.config.data);
    console.log('调节服务总价值:', vepRegulationServiceStore.regionRegulationService);

    isSelected.value = true;
  }
})


const optionsArea = [
  {
    value: '铅山县',
    label: '铅山县',
    disabled: true,
  },
  {
    value: '河口镇',
    label: '河口镇',
  },
  {
    value: '湖坊镇',
    label: '湖坊镇',
  },
  {
    value: '石塘镇',
    label: '石塘镇',
  },
  {
    value: '稼轩乡',
    label: '稼轩乡',
  },
  {
    value: '紫溪乡',
    label: '紫溪乡',
  },
  {
    value: '英将乡',
    label: '英将乡',
  },
  {
    value: '虹桥乡',
    label: '虹桥乡',
  },
  {
    value: '陈坊乡',
    label: '陈坊乡',
  },
  {
    value: '鹅湖镇',
    label: '鹅湖镇',
  },
  {
    value: '天柱山乡',
    label: '天柱山乡',
  },
  {
    value: '武夷山镇',
    label: '武夷山镇',
  },
  {
    value: '太源畲族乡',
    label: '太源畲族乡',
  },
  {
    value: '篁碧畲族乡',
    label: '篁碧畲族乡',
  },
  {
    value: '新滩乡',
    label: '新滩乡',
  },
  {
    value: '永平镇',
    label: '永平镇',
  },
  {
    value: '汪二镇',
    label: '汪二镇',
  },
  {
    value: '葛仙山镇',
    label: '葛仙山镇',
  },
  {
    value: '青溪办事处',
    label: '青溪办事处',
  },
  // {
  //   value: '铅山县国营森林苗圃',
  //   label: '铅山县国营森林苗圃',
  // },
  // {
  //   value: '铅山县青溪服务中心',
  //   label: '铅山县青溪服务中心',
  // },
  // {
  //   value: '江西铜业集团公司永铜分公司',
  //   label: '江西铜业集团公司永铜分公司',
  // }
];

// watch(vepValue, (newValue) => {
//   config.number[0] = newValue;
// });
// let config = reactive({
//   number: [vepValue.value],
//   toFixed: 2,
//   content: '{nt}万元',
//   style: {
//     fontSize: 34,
//     fontWeight: 'bold',
//     fill: '#d9db55'
//   }
// })


</script>

<style scoped>
.vepD4-region-year {
  position: relative;
  width: 100%;
  height: 100%;
}

.vepD4-region-year-main {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;


}

.vep-result {
  position: absolute;
  z-index: 10;
  left: 50%;
  top: 40%;
  margin-top: 1px;
  transform: translateX(-50%);

}

.vepD4-region-year-title {
  flex: 1;
  text-align: center;
  padding-top: 20px;

}

.vepD4-select {
  flex: 1;
  display: flex;
  flex-direction: row;
  z-index: 1;
  justify-content: space-between; /* 使子元素在父容器中均匀分布 */
  padding-right: 20px;
  margin-top: 10px;

}

.vepD4-input-name {
  flex: 1;
}

.vepD4-select-region {
  flex: 1;

}


</style>
